<template>
	<view class="footer">
		<view v-if="myprop" class="footer-v2" v-for="(item,index) in myprop" :key="index" @click="toDetail(item)">
			<view class="footer-v2-left"> <text class="">{{index+1}}</text></view>
			<view class="footer-v2-center">
				<view class="newsBox">
					<view class="newsBox-left">
						<text class="info">{{item.information}}</text>
						<text class="timer">{{item.source}}</text>
					</view>
					<view class="newsBox-right">
						<img :src="item.image" alt="">
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			// 检测类型 + 其他验证
			myprop: {
				type: Array,
				// default:['1','2'] //
				// required: true,
				// validator: function(value) {
				// 	return value >= 0
				// }
			}
		},
		onLoad() {
			
		},
		methods: {
			// 跳转到详情页
			toDetail(item) {
				let json = JSON.stringify(item)
				let jsoncode = encodeURIComponent(json)
				uni.navigateTo({
					url: '/pages/index/TravelDetail/TravelDetail?detail=' + jsoncode,
				});
			}
		}
	}
</script>

<style lang="less">
	.newsBox {
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.newsBox-right {
			width: 200rpx;
			height: 100%;

			img {
				width: 100%;
				height: 90%;
			}
		}

		.newsBox-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			width: 300rpx;
			height: 100%;

			.info {
				font-size: 25rpx;
				margin-right: 10rpx;
			}

			.timer {
				color: #666;
				font-size: 18rpx;
			}
		}
	}

	.footer {
		width: 95%;
		height: 70%;
		background: white;
		margin: auto;
		border-radius: 30rpx;
		margin-top: 40rpx;

		.footer-v2 {
			width: 90%;
			height: 30%;
			margin: 20rpx auto;
			display: flex;
			border-bottom: 1px solid #ccc;

			.footer-v2-left {
				width: 15%;
				height: 100%;
				text-align: center;

				text {
					font-size: 35rpx;
					font-weight: bold;
					color: red;
					line-height: 80rpx;
				}
			}

			.footer-v2-center {
				width: 80%;
				height: 100%;
			}

		}
	}
</style>